import { Chart } from "@antv/g2";
import { Http } from "@b/model/base/http";
import { REANIMATIONTIME, EQUIPMENT } from "@b/model/enum";
export class Box2 {
    chart?: Chart;
    timer: any;
    width: number;
    height: number
    constructor(width: string, height: string) {
        this.timer = null
        this.width = parseInt(width)
        this.height = parseInt(height) - 20
    }
    init() {
        const { width, height } = this
        this.chart = new Chart({
            container: document.getElementById('box2') as HTMLElement,
            width, height,
            theme: 'classicDark'
        })
        this.chart.data([]).interval()
            .axis('x', { grid: false, title: false, tick: false, labelFill: '#f9e433', labelFontSize: 14, labelOpacity: 1 })
            .axis('y', { grid: false, title: false })
            .encode('x', 'name')
            .encode('y', 'value')
            .style('fill', 'linear-gradient(-90deg, #0572e9 0%,  #0ecdf7 100%)')
            .style('radius', 15).style('minHeight', 10).animate('update', { type: 'growInY' })
            .encode('size', 30).style('cursor', 'pointer')
        this.chart.render();
    }
    async changeData(search: string) {
        clearTimeout(this.timer)
        const res = await new Http().request('/v1/bigscreen/GetDeviceSharedAnalyseOrder', { method: 'GET', parames: { type: search }, cache: true })
        const data: { name: string; value: number }[] = []
        let count = 0
        res.forEach((item: { name: string; value: number }) => {
            const name = EQUIPMENT.get(item.name)
            if (name) {
                data.push({ name, value: item.value })
            } else {
                count += item.value
            }
        })
        data.push({ name: '其他', value: count })
        this.chart?.changeData(data)
        this.timer = setTimeout(() => {
            this.changeData(search)
        }, REANIMATIONTIME);
    }
}